<template>
    <div class="activity-index">
			<el-form :inline="false" >
			<el-form-item label="信息内容">
				<el-input  placeholder="请输入信息内容" style="width: 600px;" v-model="content"></el-input>
			</el-form-item>
			</el-form>
    	<el-form :inline="true" >
					<el-form-item label="信息分类">
						<el-select  placeholder="请输选择分类"  v-model="categoryId" >
							<el-option label="请选择" value="" ></el-option>
							<el-option :label="item.name" :value="item.categoryId" v-for="item of categorys" :key="item.categoryId"></el-option>
						</el-select>
					</el-form-item>
          <el-form-item label="信息状态">
            <el-select  placeholder="请输选择状态"  v-model="status" >
							<el-option label="请选择" value="" ></el-option>
              <el-option label="审核中" value="0"></el-option>
              <el-option label="已通过" value="1"></el-option>
              <el-option label="已删除" value="-2"></el-option>
							<el-option label="不通过" value="-1"></el-option>
							<!-- -1不通过 0审核 1发布 -2逻辑删除 -->
            </el-select>
          </el-form-item>
          <el-form-item label="排序字段">
            <el-select  placeholder="请输选择排序字段"  v-model="order">
							<el-option label="请选择" value="" ></el-option>
              <el-option label="浏览数" value="1"></el-option>
              <el-option label="发布时间" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="query">
              <el-button type="primary" @click="startQuery">查询</el-button>
        </div>
        <el-table :data="notices" style="width: 100%">
            <el-table-column label="#" 
                             type="index"
                            :index="1">
            </el-table-column>
            <el-table-column label="公告 ID" prop="id" width="130">
              <template slot-scope="scope">
									{{scope.row.noticeId}}
									<div class="top" v-if="scope.row.priceId!=null">
										top
									</div>
              </template>
            </el-table-column>
            <el-table-column label="内容" prop="content" width="200">
            </el-table-column>
            <el-table-column label="用户" prop="nickname">
            </el-table-column>
            <el-table-column label="状态" prop="statusStr">
            </el-table-column>
            <el-table-column label="浏览数" prop="browseNum">
            </el-table-column>
            <el-table-column label="收藏数" prop="collectionNum">
            </el-table-column>
            <el-table-column label="发布时间" prop="createDate">
            </el-table-column>
            <el-table-column label="操作" prop="desc" width="160">
                <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="detail(scope.$index, scope.row)">查看</el-button>
                    <el-button
                      size="mini"
                      type="success"
                      @click="checkNotice(scope.$index, scope.row,1)" v-if="scope.row.status==0 || scope.row.status==-1">通过</el-button>
											<!-- -1不通过 0审核 1发布 -2逻辑删除 -->
											<el-button
												size="mini"
												type="warning"
												@click="checkNotice(scope.$index, scope.row,-1)" v-if="scope.row.status==1">不通过</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pages">
            <el-pagination
              background
              @size-change="pageSizeChange"
              @current-change="pageCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
// @ 是 /src 的别名
export default {
    name: 'NoticeComponent',
    props: {

    },
    data() {
        return {
            notices: [],
						categorys: [],
						pageNum:1,
						pageSize:10,
						total:0,
						order:'',
						
						categoryId:'',
						content:'',
						noticeId:'',
						status:'' // 获取-1不通过 0审核 1发布 -2逻辑删除
        }
    },
		created: function() {
			this._getNotice()
			this._getCategory()
		},
    methods: {
      detail(index, obj) {
        this.$router.push("/notice/detail/"+obj.noticeId);
      },
			_getNotice() {
				let _this = this
				this.notices  = []
				this.axios.get('/admin/listNotice?pageNum='+this.pageNum+'&pageSize='+this.pageSize+
				'&order='+this.order+'&status='+this.status+'&content='+this.content+'&categoryId='+this.categoryId)
				.then(function(response) {
					console.log(response.data)
					let data  = response.data
					_this.notices = data.data.list
					_this.total = data.data.total
				});
			},
			_getCategory() {
				this.axios.get('/client/category/listCategory')
				.then((res)=>{
					console.log(res.data)
					this.categorys = res.data
				})
			},
			pageSizeChange(pageSize) {
				this.pageSize = pageSize
				this._getNotice()
			},
			pageCurrentChange(pageNum) {
				this.pageNum = pageNum
				this._getNotice()
			},
			startQuery() {
				this.pageNum = 1
				this._getNotice()
			},
			//状态改变
			checkNotice(index,obj,status) {
				let _event = event
				this.axios.get('/admin/checkNotice?noticeId='+obj.noticeId+'&status='+status)
				.then((res)=>{
						this.$notify({
							title: '操作成功',
							message: '成功设置公告状态',
							type: 'success'
						});
						obj.status = status
						obj.statusStr= status==-1?'不通过':'发布'
				})
			}
    }
}
</script>
<style scoped lang="styl">

.top
  position absolute
  top 0
  left 0
  font-size 8px
  color #fff
  padding 0 8px
  background #f32

.query
    display flex
    justify-content flex-end
    margin 0 58px 20px 0 
.pages
    display flex
    justify-content flex-end
    margin-top 20px
</style>